<template>
  <!-- 工作日志 -->
  <div class="WorkLog">
    <div class="top">
      <div class="add_worklog" @click="DialogVisible=true">
        <span class="span_icon">+</span>
        <span class="span_wl">添加工作日志</span>
      </div>
      <!-- 添加工作日志 -->
      <el-dialog
        title="工作日志"
        :visible.sync="DialogVisible"
        width="600px"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
      >
        <div class="color_box"></div>
        <el-row :gutter="10">
          <el-col :span="20">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="计划类型" style="margin-left:10%;">
                <el-select
                  v-model="typeVal"
                  placeholder="请选择"
                  style="width:95%;"
                  @change="Selectplan"
                >
                  <el-option
                    v-for="item in plantype"
                    :key="item.type"
                    :label="item.label"
                    :value="item.type"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>

          <el-col :span="20">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="计划内容" style="margin-left:10%;">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 5, maxRows: 8}"
                  v-model="form.main"
                  placeholder="请输入工作计划"
                  style="width:95%;"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <div class="footer">
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="medium" @click="addPlan">确定</el-button>
            <el-button type="info" size="medium" @click="DialogVisible=false">取消</el-button>
          </span>
        </div>
      </el-dialog>
      <!-- end -->
      <div class="e_work" @click="EmployeeDiary" v-show="levelInt<25">
        <span>员工日志</span>
      </div>
      <div class="div_more" @click="MoreDiary">
        <span>更多</span>
      </div>
      <table class="table">
        <tr>
          <td style="width:10%;border: 1px solid #eee;">当天工作日志</td>
          <td style="border-top: 1px solid #eee;border-right: 1px solid #eee;">
            <el-table :data="worklog" height="150" :show-header="status">
              <el-table-column prop="xuhao" width="30"></el-table-column>
              <el-table-column prop="main" style></el-table-column>
            </el-table>
            <!-- <tr
              v-for="ite in worklog"
              :key="ite.xuhao"
              style="line-height:24px;text-align:left;margin-left:20px;font-size:14px;"
            >{{ite.xuhao}}.{{ite.main}}</tr>-->
            <!-- <div
              v-for="ite in worklog"
              :key="ite.xuhao"
              style="line-height:24px;text-align:left; width:98%;margin:0 auto;font-size:14px;"
            >{{ite.xuhao}}.{{ite.main}}</div>-->
          </td>
        </tr>
      </table>
    </div>
    <!-- end 1 -->
    <!-- 设计稿 -->

    <!-- <div class="body_worklog">

  <div class="span_day">

   <div class="span_left">
      <span>第二天</span>
    </div>
  </div>
  <div class="span_day">
    <div class="span_left">
      <span>第三天</span>
    </div>
  </div>
  <div class="span_day">
   <div class="span_left">
      <span>第四天</span>
    </div>
  </div>
  <div class="span_day">
   <div class="span_left">
      <span>第五天</span>
    </div>
  </div>
    </div>-->
    <!-- 底部 -->
    <div class="div_bottom_left">
      <div class="span_bottom">
        <i class="el-icon-document"></i>
        <span>周计划</span>
      </div>
      <el-table :data="tableData" stripe height="350">
        <el-table-column prop="xuhao" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="createOn" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="main" label="周计划内容" show-overflow-tooltip width="120" align="center"></el-table-column>
        <el-table-column prop label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="WorkLogDetail(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total1"
          :current-page.sync="current1"
          :page-size="pagesize"
          @current-change="handleCurrentChange1"
        ></el-pagination>
      </template>
    </div>
    <div class="div_bottom_right">
      <div class="span_bottom">
        <i class="el-icon-document"></i>
        <span>月计划</span>
      </div>
      <el-table :data="tableDatas" stripe height="350">
        <el-table-column prop="xuhao" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="createOn" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="main" label="月计划内容" show-overflow-tooltip width="180" align="center"></el-table-column>
        <el-table-column prop label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="WorkLogDetail(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page.sync="current"
          :page-size="pagesize"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </template>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data () {
    return {
      status: false,
      levelInt: 0,
      //计划
      plantype: [{ type: 1, label: "日计划" }, { type: 2, label: "周计划" }, { type: 3, label: "月计划" }],
      typeVal: "日计划",
      form: { type: 1, main: "", },
      DialogVisible: false,
      total: 0,
      current: 1,
      pagesize: 5,
      total1: 0,
      current1: 1,
      worklog: [],
      tableData: [],
      tableDatas: [],
      creater: 0,
      Mark: 0,
    };
  },
  created () {
    this.creater = JSON.parse(localStorage.getItem("message")).Id;
    this.levelInt = JSON.parse(localStorage.getItem("message")).RoleLevelInt;
    this.getDay(); this.getWeek(0); this.getMonth(0);
  },
  methods: {
    getDay () {
      var obj = { creater: this.creater };
      var objs = JSON.stringify(obj);
      let the = { index: 4, jsondata: objs };
      console.log(the);
      axios.post("/apis/MyCenter.asmx/GetData", the).then(({ data }) => {
        var list = eval('(' + data.d + ')');
        for (var i = 0; i < list.length; i++) { this.worklog.push({ xuhao: (i + 1), main: list[i].main }); }
        console.log(this.worklog);
      });

    },
    // 获取周计划列表页数据
    getWeek (page) {
      let obj = { pn: page, PerPageSize: this.pagesize, creater: this.creater }; var objs = JSON.stringify(obj);
      let the = { index: 5, jsondata: objs };
      axios.post("/apis/MyCenter.asmx/GetData", the).then(({ data }) => {
        var list = JSON.parse(data.d);
        //console.log(list)
        this.total1 = list.count;
        this.tableData = list.data;
      });
    },
    // 获取月计划列表页数据
    getMonth (page) {
      let obj = { pn: page, PerPageSize: this.pagesize, creater: this.creater }; var objs = JSON.stringify(obj);
      let the = { index: 6, jsondata: objs };
      axios.post("/apis/MyCenter.asmx/GetData", the).then(({ data }) => {
        var list = JSON.parse(data.d);
        this.total = list.moncount;
        this.tableDatas = list.mondata;
      });
    },
    Selectplan (e) {
      this.form.type = e;
    },
    // 添加工作计划
    addPlan () {
      if (this.Mark == 0) {
        if (this.form.main == "") { this.$message.error("计划内容非空"); }
        var obj = { creater: this.creater, type: this.form.type, main: this.form.main, };
        var objs = JSON.stringify(obj);
        let the = { index: 2, jsondata: objs };
        this.Mark = 1;
        axios.post("/apis/MyCenter.asmx/Add", the).then(({ data }) => {
          var list = JSON.parse(data.d);
          if (list.flag == true) {
            this.Mark = 0;
            this.$message.success(list.tip); this.DialogVisible = false;
            if (this.form.type == 1) { this.worklog = []; this.getDay(); } else { this.getWeek(0); this.getMonth(0); }
            this.form.main = ""; this.form.type = 1; this.typeVal = "日计划";
          } else {
            this.$message.error(list.tip);
          }
        });
      }
    },
    EmployeeDiary () {
      this.$router.push("./EmployeeDiary");
    },
    MoreDiary () {
      this.$router.push("./MoreDiary");
    },
    //日志详情
    WorkLogDetail (e) {
      this.$router.push({ path: "./WorkLogDetail", query: { e: e } });
    },
    // 分页
    handleCurrentChange (e) {
      this.getMonth(e - 1); this.getWeek(this.current1 - 1);
      //this.current = e;
    },
    //周计划分页
    handleCurrentChange1 (e) {
      this.getWeek(e - 1); this.getMonth(this.current - 1);
      // this.current1 = e;
      // console.log(this.current1)
    }
    // 更多
    // more() {
    //   this.$router.push("./WorklogMore");
    // }
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/base.scss';
.WorkLog {
  width: 98%;
  background-color: $white;
  // border: 1px solid #f00;
  //height:700px;
  margin-top: 15px;
  margin-left: 10px;
  overflow: hidden;
}
.add_worklog {
  width: 290px;

  height: 60px;
  background-color: rgba(9, 98, 167, 1);
  border: 1px solid rgba(81, 103, 210, 1);
  margin-top: 10px;
  margin-left: 40%;

  border-radius: 5px;
  font-size: 18px;
  color: $white;
  text-align: center;
  font-weight: 700;
  line-height: 60px;
  cursor: pointer;
}
.color_box {
  width: 5px;
  height: 20px;
  background-color: $Header_color;
  position: absolute;
  top: 22px;
  left: 10px;
}
.span_icon {
  font-size: 25px;
  cursor: pointer;
}
.e_work {
  float: right;
  width: 104px;
  height: 50px;
  border: 1px solid rgba(9, 98, 167, 1);
  margin-top: -55px;
  margin-right: 6%;
  border-radius: 5px;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  color: #0962a7;
  font-weight: 700;
  cursor: pointer;
}
// .e_workS {
//   float: right;
//   font-size: 17px;
//   margin-right: 60px;
//   height: 50px;
//   margin-top: -55px;
//   color: rgba(9, 98, 167, 1);
//   line-height: 50px;
//   font-weight: 700;
// }
.e_work:hover {
  background-color: rgba(9, 98, 167, 1);
  color: $white;
}
.div_more {
  float: right;
  font-size: 18px;
  color: #0962a7;
  // font-weight: 600;
  margin-top: -44px;
  margin-right: 3%;
  cursor: pointer;
  text-decoration: underline;
}
.span_plantype {
  font-size: 15px;

  margin-right: 30%;
}
.footer {
  margin-left: 35%;
}
.body_worklog {
  width: 95%;
  height: 120px;
  border: 1px solid rgba(228, 228, 228, 1);
  margin-left: 25px;
  margin-top: 15px;
}
// .span_left{
//   width: 15%;
//   height:50px;

//    border-right: 1px solid rgba(228, 228, 228, 1);
//   text-align: center;
//   font-size:16px;

//   line-height: 60px;
//   background-color: rgba(239, 237, 244, 1);
//   color: #323232;
// }

//.span_day{
//   width: 100%;
//   height:50px;
// border-bottom: 1px solid rgba(228, 228, 228, 1);
//}
.div_bottom_left {
  width: 46%;
  height: 470px;
  border: 1px solid rgba(228, 228, 228, 1);
  //background: $white;
  border-radius: 5px;
  margin-top: 15px;
  margin-left: 30px;
  margin-bottom: 20px;
  display: inline-block;
}
.div_bottom_right {
  width: 46%;

  height: 470px;
  border: 1px solid rgba(228, 228, 228, 1);
  border-radius: 5px;
  margin-top: 15px;
  margin-right: 3%;
  float: right;

  margin-bottom: 20px;
}
.span_bottom {
  line-height: 60px;
  margin-left: 5px;
  border-bottom: 1px solid rgba(228, 228, 228, 1);

  height: 50px;
  width: 98%;
}
.el-icon-document {
  margin-left: 20px;
}
.dialog-footer {
  margin-left: 10%;
}
.table {
  height: 120px;
  //border: 1px solid $bordercolor;
  width: 95%;
  margin-left: 30px;
  margin-top: 20px;
}
table,
table tr th,
table tr td {
  //border: 1px solid $bordercolor;

  text-align: center;
}
.el-pagination {
  margin-top: 15px;
  text-align: center;
}
</style>
